<template>
    <view class="wrap">
        <!-- 查看大图 -->
        <ViewBigImage></ViewBigImage>
        <!-- 销售提示 -->
        <SaleTip :tipsList="tipsList" v-if="vuex_searchResultsList.length > 0"></SaleTip>
        <view class="main-content">
            <!-- 图片列表 -->
            <ImageList
                :originList="vuex_searchResultsList"
                :merchantMode="vuex_merchantMode"
                :packPrice="packPrice"
                @gotoPreView="gotoPreView"
                @getPhotosData="getPhotosData"
                v-if="vuex_searchResultsList.length > 0"
            ></ImageList>
            <!-- 底部结算 -->
            <Settlement
                :billingInfo="billingInfo"
                :selectAllStatus="isSelectdAll"
                :couponList="couponList"
                @getSelectAllStatus="getSelectAllStatus"
                @viewCouponDetail="viewCouponDetail"
                @gotoPayPage="gotoPayPage"
                v-if="vuex_searchResultsList.length > 0"
            ></Settlement>
            <!-- 未找到照片 -->
            <NotFindPhotos :enterTimes="enterFacePageTimes" v-if="vuex_searchResultsList.length <= 0"></NotFindPhotos>
            <!-- 优惠券详情 -->
            <view class="coupon-detail-wrap" v-if="showCouponDetail">
                <CouponDetail
                    :couponList="couponList"
                    :packPrice="packPrice"
                    :currentCoupon="selectedCoupon"
                    @closeCoupon="closeCoupon"
                    @selectCoupon="selectCoupon"
                ></CouponDetail>
            </view>
        </view>
    </view>
</template>

<script>
import ImageList from './components/ImageList.vue';
import NotFindPhotos from './components/NotFindPhotos.vue';
import SaleTip from '@/components/SaleTip/index.vue';
import Settlement from '@/components/Settlement/index.vue';
import CouponDetail from '@/components/CouponDetail/index.vue';
import { accAdd } from '@/common/utils.js';
import { getSalesInfo, getCouponList } from '@/api/sales.js';
import ViewBigImage from './components/ViewBigImage.vue';
import { testData } from './components/test.js';
import { commonMethods } from '@/mixins/commonMethods.js';
export default {
    data() {
        return {
        };
    },
    mixins: [commonMethods],
    computed: {},
    created() {
        this.getSalesInfo(this.vuex_userId);
        this.getCouponList(this.vuex_userId);
    },
    onShow() {
        uni.$on('updateCouponList', () => {
            if (this.vuex_userId) {
                this.getCouponList(this.vuex_userId);
            }
        });
    },
    methods: {
        // 选择使用优惠券
        selectCoupon(item) {
            this.selectedCoupon = item;
            let payParam = this.getPayParam(this.selectedPics,this.vuex_userId, this.selectedCoupon.coupon_number);
            this.computeAmount(payParam);
        },
        // 获取图片列表选中的数据
        getPhotosData(picdata) {
            this.isSelectdAll = picdata.isSelectdAll;
            this.selectedPics = picdata;
            // 如果有优惠券的话 就请求接口获取优惠价
            if (this.selectedCoupon && this.selectedCoupon.coupon_number && picdata.hadSelectPicCount > 0) {
                let payParam = this.getPayParam(picdata,this.vuex_userId, this.selectedCoupon.coupon_number);
                this.computeAmount(payParam);
            } else {
                this.billingInfo.payAmount = picdata.packagedPrice;
                this.billingInfo.saleAmount = picdata.saleAmount;
                this.billingInfo.discount = accAdd(picdata.saleAmount, -picdata.packagedPrice);
                this.billingInfo.hadSelectPicCount = picdata.hadSelectPicCount;
                this.billingInfo.ids = picdata.ids;
                this.billingInfo.type = picdata.type;
            }
        },
        // 查看大图
        gotoPreView(item) {
            uni.$emit('loadBigImage', { image: item });
        },
        // 到聚合支付页面
        gotoPayPage(data) {
            uni.navigateTo({
                url: `/pages/minePages/pay/pay?payData=${JSON.stringify(data)}&couponData=${JSON.stringify(this.selectedCoupon)}&userid=${this.vuex_userId}`
            });
        }
   
    },
    components: {
        SaleTip,
        ImageList,
        Settlement,
        NotFindPhotos,
        CouponDetail,
        ViewBigImage
    },
};
</script>

<style lang="scss" scoped="scoped">
.wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f7f8fc;
    padding-bottom: 98rpx !important;
    overflow: hidden;
    position: relative;
    .main-content {
        // padding-top: 78rpx;
        position: relative;
        z-index: 1;
        .coupon-detail-wrap {
            position: fixed;
            z-index: 10;
            left: 0;
            bottom: 98rpx;
        }
    }
    .canvas-wrap {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -100;
        opacity: 0;
        width: 0;
        overflow: hidden;
        .myCanvas {
            position: absolute;
            top: -4000rpx;
            left: 3000rpx;
            z-index: -11;
            opacity: 0;
        }
    }
}
</style>
